<%@page import="java.sql.*"%>
<%@page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>成语接龙版本2</title>
<style type="text/css">
h1{ color: red;}
.kuang{ padding: 20px;}
.content{ border: 1px solid gray; border-radius: 20px; margin-bottom: 10px; padding: 20px;}
input,button { border-radius: 6px; outline: none; padding: 6px;}
.msg{ color: red; font-weight:bold; margin-bottom: 10px}
form{ display: inline;}
.history>p:nth-child(even){ color: red; font-weight: bold;}
</style>
</head>
<body>
<div class='kuang'>
	<h2>time=${time}</h2>
	<div class='content'>
		<h1>人机大战之成语接龙</h1>
		<div class='history'>
			<c:forEach items="${history}" var="it" varStatus="s">
				<p>${s.count} . [${s.count%2==0?"机":"人"}] ${it}</p>
			</c:forEach>
		</div>
	</div>
	<form method='post' accept-charset="utf-8">
		<div class='msg'><c:out value="${msg}"></c:out></div>
		<input name='chengyu'<c:if test='${isUserWin}'> disabled</c:if>/>
		<input name='time' type='hidden'/>
		<button<c:if test='${isUserWin}'> disabled</c:if> onclick='return check()'>接龙</button>
	</form>
	<button onclick='location.href="${pageContext.request.contextPath}/jielong"'>再来一局</button>
</div>
<script type="text/javascript">
function check() {
	document.querySelector('input[name="time"]').value=new Date().getTime()
	let first='${first}'
	let msg=null
	let cy=document.querySelector('input[name="chengyu"]').value.trim()
	if(cy.startsWith(first)){
		if(cy.length>=3 && length<=14)return true
		msg='请输入字数在3个到14个范围内的成语~'
	}else{
		msg='你输入的“'+cy+'”违反了成语接龙的规则，应该以“'+first+'”开头~'
	}
	document.querySelector('.msg').innerText=msg
	return false
}
</script>
</body>
</html>